<template>
  <div class="news">
    <template v-for="item in reportList">
      <el-card style="margin: 10px" shadow="hover">
        <el-descriptions :title="item.reportTitle" :column="1" style="" class="news_desc" :colon="false">
          <el-descriptions-item class="detail" label="报告范围：" style="font-family: 微软雅黑">
            <template slot="label">
              <i class="el-icon-wind-power"></i>
              报告范围：
            </template>
            {{ item.startDate }} - {{ item.endDate }}
          </el-descriptions-item>
          <template slot="extra">
            <el-button type="primary" size="small" @click="detail(item.id)">详情</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-time"></i>
              创建时间：
            </template>
            {{ item.createTime }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </template>

    <el-dialog title="报告详情" :visible.sync="dialogTableVisible" width="80%">
      <el-card>
        <div slot="header" class="clearfix">
          <span>分析结论</span>
        </div>
        <div class="text item">
          <mavon-editor
            class="md"
            :value="conclusion"
            :subfield="false"
            :defaultOpen="'preview'"
            :toolbarsFlag="false"
            :editable="false"
            :scrollStyle="true"
            :ishljs="true"
          />
        </div>
      </el-card>
      <div style="margin: 10px 0"></div>
      <el-card>
        <div slot="header" class="clearfix">
          <span>可视化图表</span>
        </div>
        <div class="text item">
          <el-card class="chart" v-if="option[0] !== '{}'">
            <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[0])"/>
          </el-card>
          <el-card class="chart" v-if="option[1] !== '{}'">
            <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[1])"/>
          </el-card>
          <el-card class="chart" v-if="option[2] !== '{}'">
            <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[2])"/>
          </el-card>
          <el-card class="chart" v-if="option[3] !== '{}'">
            <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[3])"/>
          </el-card>
          <el-card class="chart" v-if="option[4] !== '{}'">
            <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[4])"/>
          </el-card>
        </div>
      </el-card>
    </el-dialog>


    <!--  分页  -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="data.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="data.size"
      layout="sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>

import {detailReport, pageReportList} from "@/api/carbon-manage/reports";

export default {
  name: "News",
  data() {
    return {
      dialogTableVisible: false,
      total: -1,
      data: {
        page: 1,
        size: 10
      },
      option: ["{}", '{}', '{}', '{}', '{}'],
      reportList: [],
      conclusion: '',
      title: '',
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    detail(id) {
      this.dialogTableVisible = true;
      detailReport(id).then(res => {
        console.log(res.data)
        this.option = res.data.reportCodeList.map(item => {
          try {
            JSON.parse(item.code);
            return item.code;
          } catch (e) {
            return '{}';
          }
        });
        this.conclusion = res.data.reportContent;
        this.title = res.data.reportTitle;
      })
    },
    loadData() {
      pageReportList(this.data).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.reportList = res.data.rows;
          this.total = res.data.total;
        }
      })
    },
    skipNews(id) {
      let url = "https://www.carbonstop.net/domedetail" + id;
      window.open(url);
    },
    handleSizeChange(pageSize) {
      this.data.size = pageSize
      this.loadData()
    },
    handleCurrentChange(pageNum) {
      this.data.page = pageNum
      this.loadData()
    },
  }
}
</script>

<style scoped lang="scss">
.news {
  margin: 10px;
}

.chart {
  margin-bottom: 10px;
}
</style>
